
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>物流公司运营指标监控大屏</title>
    <link rel="stylesheet" th:href="@{/lib/font-awesome/6.0.0/css/all.min.css}">
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<div class="dashboard">
    <div class="header">
        <div class="title">物流公司运营指标监控大屏</div>
        <div class="datetime" id="currentDateTime"></div>
    </div>
    <div class="three-column-layout">
        <div class="column">
            <div class="component">
                <div class="component-header">
                    <div class="component-title">业务类型分布</div>
                    <div class="component-icon"><i class="fas fa-chart-pie"></i></div>
                </div>
                <div class="component-content" id="businessTypeChart"></div>
            </div>
            <div class="component">
                <div class="component-header">
                    <div class="component-title">客户行为分析</div>
                    <div class="component-icon"><i class="fas fa-users"></i></div>
                </div>
                <div class="component-content" id="customerBehaviorChart"></div>
            </div>
            <div class="component">
                <div class="component-header">
                    <div class="component-title">包裹处理状态</div>
                    <div class="component-icon"><i class="fas fa-chart-line"></i></div>
                </div>
                <div class="component-content" id="packageStatusChart"></div>
            </div>
        </div>
        <div class="column">
            <div class="component">
                <div class="component-header">
                    <div class="component-title">关键运营指标</div>
                    <div class="component-icon"><i class="fas fa-chart-line"></i></div>
                </div>
                <div class="component-content">
                    <div class="kpi-grid">
                        <div class="kpi-card">
                            <div class="kpi-header">
                                <div class="kpi-title">今日包裹总量</div>
                                <div class="kpi-icon"><i class="fas fa-box"></i></div>
                            </div>
                            <div class="kpi-value" id="kpi-today-pkg">0</div>
                            <div class="kpi-trend positive"><i class="fas fa-arrow-up"></i><span id="kpi-today-trend">8.2%</span> 较昨日</div>
                        </div>
                        <div class="kpi-card">
                            <div class="kpi-header">
                                <div class="kpi-title">总收入</div>
                                <div class="kpi-icon"><i class="fas fa-money-bill-wave"></i></div>
                            </div>
                            <div class="kpi-value" id="kpi-income">¥0</div>
                            <div class="kpi-trend positive"><i class="fas fa-arrow-up"></i><span id="kpi-income-trend">5.7%</span> 较昨日</div>
                        </div>
                        <div class="kpi-card">
                            <div class="kpi-header">
                                <div class="kpi-title">总支出</div>
                                <div class="kpi-icon"><i class="fas fa-receipt"></i></div>
                            </div>
                            <div class="kpi-value" id="kpi-expense">¥0</div>
                            <div class="kpi-trend negative"><i class="fas fa-arrow-up"></i><span id="kpi-expense-trend">3.2%</span> 较昨日</div>
                        </div>
                        <div class="kpi-card">
                            <div class="kpi-header">
                                <div class="kpi-title">净收入</div>
                                <div class="kpi-icon"><i class="fas fa-chart-line"></i></div>
                            </div>
                            <div class="kpi-value" id="kpi-net">¥0</div>
                            <div class="kpi-trend positive"><i class="fas fa-arrow-up"></i><span id="kpi-net-trend">8.5%</span> 较昨日</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="component">
                <div class="component-header">
                    <div class="component-title">城市派件量排名</div>
                    <div class="component-icon"><i class="fas fa-chart-bar"></i></div>
                </div>
                <div class="component-content" id="cityDeliveryChart"></div>
            </div>
            <div class="component">
                <div class="component-header">
                    <div class="component-title">运输效率指标</div>
                    <div class="component-icon"><i class="fas fa-shipping-fast"></i></div>
                </div>
                <div class="component-content" id="transportEfficiencyChart"></div>
            </div>
        </div>
        <div class="column">
            <div class="component">
                <div class="component-header">
                    <div class="component-title">仓储运营指标</div>
                    <div class="component-icon"><i class="fas fa-warehouse"></i></div>
                </div>
                <div class="component-content" id="warehouseOperationChart"></div>
            </div>
            <div class="component">
                <div class="component-header">
                    <div class="component-title">网点运营指标</div>
                    <div class="component-icon"><i class="fas fa-store"></i></div>
                </div>
                <div class="component-content">
                    <div class="table-container">
                        <table>
                            <thead>
                            <tr>
                                <th>排名</th>
                                <th>网点名称</th>
                                <th>日处理量</th>
                                <th>客户满意度</th>
                                <th>异常处理率</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>1</td>
                                <td>北京朝阳分部</td>
                                <td>12,456</td>
                                <td>4.95</td>
                                <td>98.7%</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>上海浦东分部</td>
                                <td>11,893</td>
                                <td>4.92</td>
                                <td>98.2%</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>广州天河分部</td>
                                <td>10,567</td>
                                <td>4.88</td>
                                <td>97.8%</td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>深圳南山分部</td>
                                <td>9,845</td>
                                <td>4.85</td>
                                <td>97.5%</td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>杭州西湖分部</td>
                                <td>8,923</td>
                                <td>4.82</td>
                                <td>97.2%</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="component">
                <div class="component-header">
                    <div class="component-title">客户满意度分析</div>
                    <div class="component-icon"><i class="fas fa-smile"></i></div>
                </div>
                <div class="component-content" id="customerSatisfactionChart"></div>
            </div>
        </div>
    </div>
    <div class="footer">
        数据更新时间: 2023-11-15 14:30:45 | 物流公司运营监控系统 v2.1
    </div>
</div>

<script th:src="@{/lib/echarts/5.4.2/echarts.min.js}"></script>
<script th:src="@{/js/dashboard.js}"></script>
</body>
</html>